<template>
    <div id="activityLook" class="activityLook">
        <div class="menuTable">
			<el-tabs v-model="activeName" >
				<el-tab-pane label="基本信息" name="first" v-if='tabList && tabList.INFO'>
					<div class="div01" >
						<el-row>
							<el-col  align="left"><div class="topLine tag" >活动名称：</div>{{info.name}}</el-col>
						</el-row>
						<el-row>
							<el-col  align="left"><div class="tag">图片地址：</div>{{info.imageUrl}}</el-col>
							<el-col  align="left"></el-col>
						</el-row>
						<el-row>
							<el-col  align="left"><div class="tag">是否开始：</div>{{info.statusText}}</el-col>
						</el-row>
						<el-row>
							<el-col  align="left"><div class="tag">是否分享：</div>{{info.sharedText}}</el-col>
						</el-row>
						<el-row>
							<el-col  align="left"><div class="tag" >活动开始时间：</div>{{info.dateStart}}</el-col>
						</el-row>
						<el-row>
							<el-col  align="left"><div class="tag">活动截止时间：</div>{{info.dateEnd}}</el-col>
						</el-row>
						<el-row>
							<el-col  align="left"><div class="tag">活动URL：</div>{{info.url}}</el-col>
						</el-row>
						<el-row>
							<el-col  align="left"><div class="tag">活动描述：</div>{{info.remark}}</el-col>
						</el-row>
					</div>
				</el-tab-pane>

				<el-tab-pane label="选择卡券" name="second" v-if='tabList && tabList.COUPON'>
        			<activity-coupons-look 
						:actType='info.type'
						:coupons='coupons'
					></activity-coupons-look>
					
				</el-tab-pane>
				
				<el-tab-pane label="选择产品" name="third" v-if='tabList && tabList.PRODUCT'>
					 <activity-product-look :products='products'></activity-product-look>
				</el-tab-pane>
				
				<el-tab-pane label="参数配置" name="fourth" v-if='tabList && tabList.PARAM'>
					<div class="paramBox">
						<el-row v-for='item in params' :key='item.key'>
							<el-col  align="left">
								<div class="tag" >{{item.keyDesc}}：</div>
								<div class="rightValue">{{item.value}}</div>
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
			</el-tabs>

        </div>

    </div>
</template>

<script type="text/ecmascript-6">
	import ActivityProductLook from './ActivityProductLook.vue'
	import ActivityCouponsLook from './ActivityCouponsLook.vue'
	import {getActParam} from 'api/activity'
	export default {
		components: {ActivityProductLook, ActivityCouponsLook},
		data () {
			return {
				activeName:'first',
				actId: '',
				tabList:{}, // tabbar根据接口返回的显示
				info: [],// 基本信息
				coupons:[],// 选择卡券
				products:[],// 选择产品
				params:[], // 参数配置
			}
		},
		methods: {
			getData () {
				this.actId = sessionStorage.getItem('actShowId')
				this.$http.get('/api-active/v1/api/activityCenter/activity/' + this.actId).then((response) => {
					var data = response.body;
					let result = data.result;
					// console.log(result, result.relatedSectionsArray);
					let tabList ={};
					for(let i = 0;i< result.relatedSectionsArray.length;i++){
						tabList[result.relatedSectionsArray[i]] = true
					}
					this.tabList = tabList;
					this.info = result.info;
					this.products = result.products;
					this.coupons = result.coupons;

					for(let i = 0;i<result.coupons.length;i++){
						// 接口返回的卡券列表中没有卡券类型，手动添加一下
						this.coupons[i].actType=this.info.typeText;
					}

					if(result.info.type =='BIRTHDAY_TYPE'){
						this.getActParam(this.actId)
					}
				})
			},
			async getActParam (actId) {
				try {
					let back = await getActParam(actId)
					back = back.data
					console.log( back)
					this.params = back.result;
					
				} catch (err) {
					this.$alert('查询错误！')
					console.error(err)
				}
			},
		},
		created () {
			this.$emit('setTitleMsg', ['活动管理','活动列表','查看'])
			this.getData();
		},
	}
</script>

<style lang="less" >
	@greenStyle:#63c5ce;
	@orangeStyle:#f7931e;
    .activityLook{
		.content{
			background: #ffffff;
			min-height: 100%;
			padding:20px;
		}
		.el-menu-demo{
			background-color: rgb(246,246,246);
		}
		.bg-purple-light {
			background: #e5e9f2;
		}
		.grid-content {
			font-weight: bold;
			border-radius: 4px;
			min-height: 50px;
		}
		.div01{
			margin-left:30px;
			.el-row{
				margin-bottom:20px;
				font-size:1rem;
			}
			.tag{
				width:120px;
				display: inline-block;
			}
			.topLine{
				margin-top: 20px
			}
		}
		.paramBox{
			margin-left: 30px;
			margin-top: 20px;
			.el-row{
				font-size:1rem;
				.tag{
					width:120px;
					display: inline-block;
				}
				.rightValue{
					padding-left: 120px;
					transform: translateY(-20px);
					width: 40%;
					min-width: 400px;
				}
			}
		}

		.el-table__body-wrapper{
			overflow-y: hidden;
		}
		.menuTable{
			.el-menu{
				background: #fff;
				border-bottom:1px solid @orangeStyle;
			}
			.el-menu--horizontal>.el-menu-item:hover{
				color:@orangeStyle;
				background: #fff;
				border-bottom:5px solid @orangeStyle;
			}
			.is-active{
				background:#fff;
				color:@orangeStyle;
				border-bottom:5px solid @orangeStyle;
			}
		}
		//表格样式
		.el-table{
			th {
				background: #fff;
			.cell {
				font-size: 0.875rem;
				height:2.5rem;
				line-height:2.5rem;
				padding-left: 3px;
				padding-right: 3px;
				background: #fff;
			}
			}
			.el-table__body{
				overflow-y: auto;
			.cell{
				font-size: 0.875rem;
				padding-left:3px;
				padding-right:3px;
				height:3.125rem;
				line-height:3.125rem;
			}
			}
			.el-button--text{
				color:@greenStyle;
				margin:0 5px;
			}
			.is-disabled{
				color:#bfcbd9;
			}
		}
		.tableData02{
			margin-top:  30px;
			margin-left: 0;
		}
		#activityCouponsLook,.div03{
			.el-table{
				.cell{
					text-align: center;
				}
			}
		}
  	}
    
</style>
